<template>
    <div class="main">
        <header>
            <slot name="header"/>
        </header>
        <main :class="hasFooter ? '' : 'cc'">
            <slot/>
        </main>
        <footer v-if="hasFooter">
            <slot name="footer"/>
        </footer>
    </div>
</template>
<script>
    export default {
        computed:{
            hasFooter(){
                return !!this.$slots.footer
            }
        }
    }
</script>
<style lang="less" scoped>
@import '@/style/common.less';
    .main {
        width: 100%;
        height: 100%;
        padding: .5rem;
        > header {
            height: 2rem;
            width: 100%;
            border-bottom: 1px solid @dc03;
            text-align: right;
        }
        > main {
            height: calc(100% - 4rem);
            width: 100%;
        }
        > .cc {
            height: calc(100% - 2rem);
            width: 100%;
        }
        > footer {
            height: 2rem;
            width: 100%;
            border-top: 1px solid @dc03;
            text-align: right;
        }
    }

</style>